<template>
  <ContentWrap>
    <Dialog v-model="dialogVisible2" title="编辑" width="600" max-height="100">
      <Form :schema="schema" @register="formRegister" />
      <template #footer>
        <BaseButton type="primary" @click="formSubmit" :loading="addLoading">提交</BaseButton>
        <BaseButton @click="dialogVisible2 = false">关闭</BaseButton>
      </template>
    </Dialog>
  </ContentWrap>
</template>
<script setup lang="ts">
import { ContentWrap } from '@/components/ContentWrap'
import { Dialog } from '@/components/Dialog'
import { ref, reactive, defineProps, defineEmits, watch } from 'vue'
import { Form, FormSchema } from '@/components/Form'
import { useValidator } from '@/hooks/web/useValidator'
import { useForm } from '@/hooks/web/useForm'
import { editVideoDetailApi } from '@/api/resLibrary/video'
import { ElMessage } from 'element-plus'

const { required } = useValidator()

const dialogVisible2 = ref(false)

const { formRegister, formMethods } = useForm()

const { getElFormExpose, getFormData, setValues } = formMethods
const emit = defineEmits(['onSearch'])
const isShowVideoDetailModel = () => {
  dialogVisible2.value = true
}
const props = defineProps({
  currentRow: {
    type: Object,
    default: () => null
  }
})
watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return
    setValues(currentRow)
  },
  {
    deep: true,
    immediate: true
  }
)
defineExpose({ isShowVideoDetailModel })
const schema = reactive<FormSchema[]>([
  {
    field: 'fileName',
    label: '名称',
    component: 'Input',
    formItemProps: {
      rules: [required()]
    },
    colProps: {
      span: 24
    }
  },
  {
    field: 'thumbnailTime',
    label: '缩略图时间点',
    component: 'InputNumber',
    formItemProps: {
      rules: [required()]
    },
    colProps: {
      span: 24
    }
  },
  {
    field: 'startPlayTime',
    component: 'InputNumber',
    label: '片头时长(秒）',
    formItemProps: {
      rules: [required()]
    },
    colProps: {
      span: 24
    }
  },
  {
    field: 'status',
    component: 'Select',
    label: '状态',
    formItemProps: {
      rules: [required()]
    },
    colProps: {
      span: 24
    },
    componentProps: {
      options: [
        {
          label: '未学习',
          value: 0
        },
        {
          label: '学习中',
          value: 1
        },
        {
          label: '学习完成',
          value: 2
        }
      ]
    }
  },
  {
    field: 'cameraFlag',
    component: 'Select',
    label: '摄像头',
    formItemProps: {
      rules: [required()]
    },
    colProps: {
      span: 24
    },
    componentProps: {
      options: [
        {
          label: '不开启',
          value: 0
        },
        {
          label: '开启',
          value: 1
        }
      ]
    }
  },
  {
    field: 'sortNum',
    component: 'InputNumber',
    label: '排序',
    formItemProps: {
      rules: [required()]
    },
    colProps: {
      span: 24
    }
  }
])

const addLoading = ref(false)
const formSubmit = async () => {
  const elFormExpose = await getElFormExpose()
  const valid = await elFormExpose?.validate().catch((err) => {
    console.log(err)
  })
  if (valid) {
    const formData = await getFormData()
    addLoading.value = true
    editVideoDetailApi(formData)
      .then((res) => {
        if (res.code == '00000') {
          dialogVisible2.value = false
          ElMessage({ message: '保存成功！', type: 'success' })
          emit('onSearch', '子组件数据')
        }
      })
      .finally(() => {
        addLoading.value = false
      })
  }
}
</script>
